I'm now writing a vue project and I want to send some api requests to the remote server.
So I add this in my webpack.dev.conf.js:
devServer: {
historyApiFallback: true,
noInfo: true,
hot:true,
open:true,
proxy: {
'/api': {
target: 'http://47.93.247.233',
secure: false,
changeOrigin: true,
pathRewrite: {'^/api' : ''}
}
}
},
But I still get 404 in my browser.
And I'm sure the server is ok:
I think maybe the webpack devServer didn't forward my http request to the remote server. Is there anything wrong in my code? Or, can I try some other methods?
Thanks in advance!
Did you try to use
proxyTable: {...},
instead of
proxy{}
I'm running with webpack version 3.10.0 with npm v 5.6.0 and this works fine!
May be, you will try "logLevel: 'debug' too, to see some hints in your terminal window.
Related
I have been trying to get Rewrites working in NextJS for my API Paths. It was to avoid CORS issues.
I followed the solution from: NextJs CORS issue.
It is working on localhost but does not work in a production environment (I was deploying on Vercel itself).
I basically tried with all the types of rewrites:
async rewrites() {
return {
beforeFiles: [
{
source: "/api/:path*",
destination: `https://example.com/api/v1/:path*`,
basePath: false,
},
],
afterFiles: [
{
source: "/api/:path*",
destination: `https://example.com/api/v1/:path*`,
basePath: false,
},
],
fallback: [
{
source: "/api/:path*",
destination: `https://example.com/api/v1/:path*`,
basePath: false,
},
],
};
},
This rewrite works on localhost but on production, the rewrite stops working and the API calls go to /api/:path* itself.
The /api path is reserved for their Serverless Functions. Changing the source path to something else would resolve the issue.
I am developing an app using Angular 7 and Apollo GraphQL client and I am trying to use the client devtools for Chrome. If I understood the documentation correctly, the only thing that I have to do is to run my app in a non-production environment and the Apollo tab will appear on the Google Chrome development tools.
Unfortunately this is not happening. The Apollo Devtools icon appears on my browser, but the Apollo tab does not appear on the devtools.
Am I missing some configuration?
I also tried to force the devtools to appear, by adding: connectToDevTools: true to my GraphQL module (code below), but this didn't solve the problem.
const uri = environment.graphqlURL; // <-- add the URL of the GraphQL server here
export function createApollo(httpLink: HttpLink) {
return {
link: httpLink.create({uri}),
cache: new InMemoryCache(),
connectToDevTools: true
};
}
#NgModule({
exports: [ApolloModule, HttpLinkModule],
providers: [
{
provide: APOLLO_OPTIONS,
useFactory: createApollo,
deps: [HttpLink],
},
],
})
export class GraphQLModule {}
I found out what the problem was: I was having a CORS error when I tried to use my Graphql endpoint from the Angular development server (localhost:4200), so I created a proxy that pointed to my endpoint:
{
"/graphql/*": {
"target": "https://my-endpoint/",
"secure": false,
"logLevel": "debug",
"changeOrigin": true
}
}
And changed the Graphql URL to: http://localhost:4200/graphql. With this I was able to solve my CORS issue, however it seems that the Apollo Dev Tools also uses the /graphql URI.
So I changed my proxy configuration to:
{
"/stg_graphql/*": {
"target": "https://my-endpoint/graphql",
"secure": false,
"logLevel": "debug",
"changeOrigin": true,
"pathRewrite": {
"^/stg_graphql": ""
}
}
}
And pointed the graphql to: http://localhost:4200/stg_graphql. When I did this, everything started working.
Note: to run the development server with the proxy I am using: ng serve --proxy-config proxy.config.json.
Can someone guide me how to configure generator-webapp to use HTTPS instead of HTTP.
Tried https option and specified key files but somehow I made something wrong.
Thanks.
Figured it out by myself. All that needs to be done was to add https. The rest will be handled by browserSync. It also assigns a self-signed certificate.
browserSync: {
options: {
notify: false,
background: true,
watchOptions: {
ignored: ''
},
https: {
key: '',
cert: ''
}
},
I am using Karma (v0.12.37) as test runner along with JSPM (v0.16.2). I have added following proxy config in karma so as to allow proper loading of JSPM files:
proxies: {
'/base/jspm_packages/': '/base/app/jspm_packages/'
}
Bu this doesn't work out and fails on following:
PhantomJS 2.0.0 (Windows 8 0.0.0) ERROR: 'Potentially unhandled rejection [10] Error: XHR error loading http://localhost:9876/base/jspm_packages/npm/babel-core#5.8.22.js
Error loading http://localhost:9876/base/jspm_packages/npm/babel-core#5.8.22.js
Error loading http://localhost:9876/base/app/pages/examples/todo-example/todo.controller.test.js'
Debug Logs are giving:
proxying request - /base/jspm_packages/npm/babel-core#5.8.22.js to localhost:9876
/base/app/jspm_packages/npm/babel-core#5.8.22.js { host: 'localhost',
port: 9876,
baseProxyUrl: '/base/app/jspm_packages/',
https: false }
But the following url containing 'app' in it works properly:
http ://localhost:9876/base/ app/ jspm_packages/npm/babel-core#5.8.22.js
Any clue on what is going wrong?
Try:
proxies: {
'/app/': '/base/app/',
'/jspm_packages/': '/base/jspm_packages/'
}
If you have configured your jspm-config with a baseUrl of "/", try removing the baseUrl entry since karma-jspm does not support a custom baseUrl. Then you should be able to get rid of the "proxies" entry for the jspm_packages.
See: https://github.com/Workiva/karma-jspm/issues/91
After having done lot of trial and error, found out the following way:
Instead of playing with proxies, alter the jspm paths config in karma.config.js
jspm: {
...
paths: {
"github:*": "app/jspm_packages/github/*",
"npm:*": "app/jspm_packages/npm/*",
'app/*': 'app/*.js'
},
...
},
What finally did the trick for me (karma, babel, JSPM/SystemJS) was to have this:
Remove baseUrl from the karma.conf.js and have this jspm section:
jspm: {
config: 'config.js',
loadFiles: [
'www/**/*.spec.js'
],
serveFiles: [
'www/**/!(*spec).js'
],
paths: {
"github:*": "/base/jspm_packages/github/*",
"npm:*": "/base/jspm_packages/npm/*",
'www/*': '/base/www/*'
}
},
I have an angularJs App which I built with grunt and a server backend written in Java running on a tomcat server. To wire those together when development I wanted to use grunt-connect-proxy. But I could not get it to work even a bit.
All the "examples" and "demos" I found on the web happened to use a several hundred lines long Gruntfile.js. That turned out not to be really useful in finding my problem. What does a minimal (!) example look like?
This is how you can create a minimal demo which is just a proxy to google.com:
Run:
npm install grunt-connect-proxy --save-dev
npm install grunt-contrib-connect --save-dev
and creat the following Gruntfile.js:
module.exports = function (grunt) {
var proxySnippet = require('grunt-connect-proxy/lib/utils').proxyRequest;
grunt.initConfig({
connect: {
server: {
options: {
hostname: 'localhost',
keepalive: true,
open: true,
middleware: function (connect, options) {
return [proxySnippet];
}
},
proxies: [{
context: '/',
host: 'google.com',
port: 80
}]
}
}
});
grunt.loadNpmTasks('grunt-connect-proxy');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.registerTask('default', [
'configureProxies:server',
'connect:server']);
};
Now just run grunt.